<template>
	<view class="app">
		<view class="search flex justify-start items-end">
			<view class="type">
				<picker @change="changeSerch" :value="search.currentType" :range="search.type" range-key="title">
					<text>{{search.type[search.currentType].title}}</text>
				</picker>
			</view>
			
			<view class="flex justify-end items-center flex_1" style="flex: 1;">
				<view class="info flex justify-between items-center">
					<view class="ipt"><input placeholder="请输入技师ID、手机或姓名" v-model="search.key" placeholder-class="ipt2" /></view>
					<view class="btn" @click.stop="loadlist">查询</view>
				</view>
				<view class="fresh" @click.stop="loadlist">刷新</view>
			</view>
		</view>
		<scroll-view ref="list" class="list" scroll-y>
			<view class="nodata" v-if="!list.total">无数据</view>
			<view class="panel" v-for="(item,index) in list.data" @click.stop="showInfo('popup',item.id)">
				<view class="flex justify-between items-center head">
					<view>ID:{{item.id}}</view>
					<view :class="`status_${item.status}`">{{status[item.status]}}</view>
				</view>
				<view class="flex justify-between items-center">
					<view class="flex justify-start items-center">
						<view class="avatar">
							<image :src="item.avatar" mode="widthFix"></image>
							<text :class="`work_status_${item.work_status}`">{{work_status[item.work_status]}}</text>
						</view>
						<view>
							<view class="techname flex">
								<text>{{item.realname}}</text>
								<view v-if='item.is_servic === 1' class="reset" @click.stop="resetStatus(item.id)">重置服务状态</view>
							</view>
							<view class="shopname">{{item.shopname}}</view>
						</view>
					</view>
					
					<view class="flex-col items-end">
						<view>订单:{{item.sales}}单</view>
						<view>收益:￥{{Number(item.total_balance)}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="page playctr orderlistpage">
			<view class="page-item">
				<wyb-pagination :total-items="list.total" :page-items="list.per_page" :current="list.current_page" :show-total-item="true" :show-icon="true" @change="loadlist"/>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" :animation="true" round="10">
			<view class="popindex">
				<techinfo :id="id" @closePop="hideInfo"></techinfo>
			</view>
		</uni-popup>
		
	</view>
	
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	import techinfo from '@/components/techinfo/index.vue';
	
	export default{
		//认证(0)未认证(0)解约(0)认证中(0)认证失败(0)注销(0)
		//0未认证；1认证；2解约；3注销；4认证中；5认证失败
		data(){
			return{
				search:{
					type:[
						{key:'all',title:'全部'},
						{key:'0',title:'未认证'},
						{key:'1',title:'认证'},
						{key:'2',title:'解约'},
						{key:'3',title:'注销'},
						{key:'4',title:'认证中'},
						{key:'5',title:'认证失败'},
					],
					currentType:0,
					key:''
				},
				status:{
					0:'未认证',1:'认证',2:'解约',3:'注销',4:'认证中',5:'认证失败'	
				},
				work_status:{
					0:'休息',1:'工作',2:'禁用',3:'下线'
				},
				list:{},
				id:0
			}
		},
		components:{
			techinfo
		},
		onLoad() {
			that=this;
			this.loadlist();
		},
		methods:{
			resetStatus(tid){
				console.log('tid', tid);
				Comm.http('/api/service/resetserv',{tid},'POST').then(res=>{
					if(res.code==1){
						that.list=res.data;
						uni.showToast({
							icon:'none',
							title:res.msg
						});
						this.loadlist()
					}
				});
			},
			changeSerch(e){
				let v=e.detail.value;
				if(this.search.currentType==v)
					return;
				this.search.currentType=v;
			},
			loadlist(page={current:1}){
				let _page=page.current;
				Comm.http('/api/service/listtech',{status:this.search.type[this.search.currentType].key,search_key:this.search.key,page:_page},'POST').then(res=>{
					if(res.code==1){
						that.list=res.data;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			showInfo(action,id){
				this.id=id;
				this.$refs[action].open();
			},
			hideInfo(e){
				this.$refs['popup'].close();
				if(e)
					this.loadlist();
			},
			onPullDownRefresh(){
				this.loadlist();
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style lang="scss">
	.popindex{
		width: 100vw;
		background-color: #f7f7f7;
		border-radius: 15px 15px 0 0;
		overflow: hidden;
	}
	.search{
		padding: 0 8px;
		height: 45px;
		.type{
			padding: 0 16px; border-bottom: 1px solid #9f9f9f;
			height: 35px; line-height: 35px;
		}
		.info{
			flex: 1;
			
			.ipt{
				flex: 1;
				margin: 0 8px;
				background-color: #f5f5f5;
				border-radius: 5px;
				padding: 0px 16px;
				border-bottom: 1px solid #cdcdcd;
			}
			.ipt>input{
				height: 35px;
			}
			.ipt2{
				font-size: 12px;
			}
			.btn{
				margin-left: 8px;
				color: #fff;
				background-color: #2d8cf0;
				border-color: #2d8cf0;
				border-radius: 10px;
				padding: 0 16px;
				height: 35px; line-height: 35px;
				cursor:pointer;
			}
		}
		.fresh{
			margin-left: 18px; color: #2d8cf0; cursor:pointer;
		}
	}
	.list{
		margin-top: 8px;
		height: calc(100vh - 158px);
		.head{
			padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f0f0f0;
		}
		.avatar{
			height: 48px; width: 48px; border-radius: 50%; overflow: hidden; margin-right: 5px;
		}
		.avatar image{
			width: 100%; height: 100%;
		}
		.avatar{
			position: relative;
			text{
				position: absolute;
				font-size: 12px;
				background: rgba(240, 243, 253,0.9);
				color: rgb(118, 130, 157);
				display: block;
				bottom: 0;
				left: 50%;
				width: 48px;
				transform: translateX(-50%);
				text-align: center;
			}
			
			.work_status_0{
				background: rgba(255, 241, 232,0.9);
				color: rgb(229, 124, 52);
			}
			.work_status_1{
				background: rgba(225, 250, 232,0.9);
				color: rgb(17, 199, 91);
			}
		}
		.shopname{
			font-size: 12px; color:#666;
		}
		.head>view:last-child{
			font-size: 12px;
			padding: 0 3px;
			border-radius: 5px;

			color: rgb(217, 217, 217);
			background: rgb(250, 250, 250);
			border: 1px solid rgb(217, 217, 217);
		}
		.status_1{
			color: #52c41a !important;
			background: rgb(246, 255, 237) !important;
			border: 1px solid rgb(17, 199, 91) !important;
		}
		.status_2{
			color: #666;
			background: rgb(246, 246, 246);
			border: 1px solid #a2a2a2;
		}

	}
	.reset{
		// border: 1px solid #2d8cf0;
		background-color: #2d8cf0;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}
</style>